<template>
      <div class="fl f-gifts">
        <div class="fl-container">
          <!--上部-->
          <div class="hd">
            <a href="" class="more">更多礼品 <span class="el-icon-arrow-right"></span></a>
            <h3>
              <a href="">礼品</a>
              <span>给她·最美好的礼物</span>
            </h3>
          </div>
          <!--下部-->
          <div class="bd">
            <div class="fl-products fl-products-row">
              <div class="fl-products-item" v-for="(item,index) in productData" :key="index">
                <a>
                  <div class="img-box">
                    <img height="240" width="220" :src="item.imgsrc" style="display: inline;">
                  </div>
                  <div class="product-content">
                    <p class="product-title">礼品 · {{ item.name }}</p>
                    <p class="product-price">
                      <span class="price-sign">¥{{ item.price }}</span>
                      <span class="primeCost">¥{{item.primeCost}}</span>
                    </p>
                    <p class="product-sell">已售 {{item.sold}} 件</p>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
</template>

<script>
import {reactive, toRefs} from "vue";

  export default {
    name: "Gift",
    setup(){
      let data = reactive({
        productData: [
          {
            id:0,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-1.jpg',
            sold:3504
          },
          {
            id:1,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-2.jpg',
            sold:3504
          },
          {
            id:2,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-3.jpg',
            sold:3504
          },
          {
            id:3,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-4.jpg',
            sold:3504
          },
          {
            id:4,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-5.jpg',
            sold:3504
          },
          {
            id:5,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-6.jpg',
            sold:3504
          },
          {
            id:6,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-7.jpg',
            sold:3504
          },
          {
            id:7,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-8.jpg',
            sold:3504
          },
          {
            id:8,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-9.jpg',
            sold:3504
          },
          {
            id:9,
            name:'星期耳钉礼盒',
            primeCost:'300',
            price:'269',
            imgsrc:'http://lixinghe.meimeng.eu.org/flower/image/gift-10.jpg',
            sold:3504
          },
        ]
      })

      function goTo(name,params){
        window.localStorage.setItem("id",params.id)
        this.$router.push({name:name})
      }

      return {
        ...toRefs(data),
        goTo
      }
    }
  }
</script>

<style scoped lang="scss">
  * {
    margin: 0;
    padding: 0;
    border: 0;
  }
  a {
    text-decoration: none;
    cursor: pointer;
  }
  li {
    list-style-type: none;
  }
  .fl-container {
    width: 1200px;
    margin: 0 auto;
    margin-top: 50px;
    padding: 40px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.2) 0px 4px 8px 0px, rgba(0,0,0,0.2) 0px 6px 20px 0px;
    border-radius: 10px;
    .hd {
      width: 1200px;
      margin: 0 auto;
      .more {
        font-size: 14px;
        line-height: 30px;
        color: #71797F;
        float: right;
      }
      h3 {
        width: 260px;
        font-size: 26px;
        line-height: 30px;
        color: #232628;
        font-weight: bold;
        span {
          padding-left: 15px;
          margin-left: 16px;
          font-size: 20px;
          line-height: 24px;
          font-weight: normal;
          border-left: 1px solid #71797F;
        }
        a {
          color: #232628;
          &:hover {
            color: orange;
          }
        }
      }
    }
  }
  .fl-products-row {
    width: 1216px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .fl-products-item {
      margin: 16px 0px 0;
      border-radius: 8px;
      border: 1px solid antiquewhite;
      display: inline-block;
      width: 212px;
      margin-left: 16px;
      margin-bottom: 16px;
      background-color: #fff;
      vertical-align: top;
      &:hover {
        transition: all 0.3s linear;
        box-shadow:0 0 20px #cccccc;
      }
      .img-box {
        border-radius: 4px;
        width: 100%;
        height: 228px;
        overflow: hidden;
        transition: all 0.6s;
        cursor: pointer;
        img {
          width: 100%;
          max-width: 100%;
          height: auto;
          vertical-align: bottom;
          text-decoration: none;
        }
      }
      &:hover .product-content p {
        color: orange;
      }
      .product-content {
        padding: 10px 8px 14px;
        text-align: center;
        color: #232628;
      }
      .product-title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
        line-height: 20px;
      }
      .product-product-price {
        margin-top: 5px;
        font-size: 16px;
        font-weight: bold;
        line-height: 20px;
      }
      .product-sell {
        margin-top: 6px;
        font-size: 12px;
        color: #71797F;
        line-height: 16px;
      }
    }
  }
  .primeCost {
    font-size: 14px;
    font-weight: normal;
    margin-left: 10px;
    color: #e5e5e5;
    text-decoration:line-through
  }
</style>
